import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { Input, Button, Flex, Form, Pagination, ConfigProvider } from 'antd'
import CustomTable from '../../components/tablecopent'
// import CustomPagination from '../../components/pagination'
import tabelData from '../../components/tabelData'
import zhCN from 'antd/lib/locale/zh_CN';
import './index.scss'

const Min = () => {

  //获取数据
  let newData = JSON.parse(JSON.stringify(tabelData))

  const [data, setData] = useState([])
  const [currentPage, setCurrentPage] = useState(1); //当前页码状态  
  const [pageSize, setPageSize] = useState(5);  //每页数
  const totalPages = Math.ceil(newData.length);//计算总页数  



  const setTabelpagin = () => {
    let startIndex = (currentPage - 1) * pageSize; // 计算起始索引（每页10条数据）  
    let endIndex = startIndex + pageSize; // 计算结束索引  
    setData(data.slice(startIndex, endIndex))
  }

  useEffect(() => {
    setTabelpagin()
    setData(newData)
  }, [])

  // const onChange=(page)=>{
  //   console.log(page);
  //   setCurrentPage(page)
  //   setTabelpagin()

  // }

  const [totalCount, setTotalCount] = useState(0);

  //表格删除
  const deleteBtn = () => {
    console.log(111);
  }

  const [selectedItems, setSelectedItems] = useState([])
  const handleCheckboxChange = (record) => {
    const updatedItems = data.map((item) => {
      if (item.id === record.id) {
        return { ...item, selected: !item.selected }; // 切换选中状态  
      }
      return item;
    });
    setSelectedItems(updatedItems); // 更新选中的数据项状态  
  };

  //表tou参数
  const columns = [ // 表头列定义，包括校验规则和其他自定义逻辑（根据实际需求进行调整）  
    {
      title: '', // 单选框列的标题  
      dataIndex: 'selected', // 单选框列的字段名，可以根据实际情况自定义  
      key: 'selected',
      render: (text, record) => {
        const isSelected = record.selected;
        return (
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <input type="checkbox" checked={isSelected} onChange={() => handleCheckboxChange(record)} />
          </div>
        );
      }
    },
    { title: '姓名', titleColSpan: 2, dataIndex: 'name', key: 'name' },
    { title: '课程', dataIndex: 'desk', key: 'desk', },
    {
      title: '操作', // 按钮列的标题  
      dataIndex: 'operation', // 按钮列的字段名，可以根据实际情况自定义  
      key: 'operation',
      render: (text, record) => (
        <div>
          <Button onClick={deleteBtn}>操作</Button>
        </div>
      ),
    },
    // rules: [{ minLength: 18, message: '年龄必须大于等于18岁' }, 
    // { maxLength: 100, message: '年龄不能超过100岁' }] },
    // 其他列定义...  
  ];

  const handleTableChange = (pagination, filters, sorter) => { // 表头列变化时的回调函数（根据实际需求进行调整）  
    // 可以执行更新数据等操作...  
    console.log(pagination, filters, sorter);
    // setTabelpagin()
  };

  const handleChange = (current) => {
    console.log(`当前页码: ${current}`);
       setCurrentPage(current)
       setTabelpagin()

    // onChange(current) 
  };

  return (
    <div id='minBox'>
      <div className="minHerder">
        <div className="herder_left">
          <Input className='inputName' placeholder="请输入名字" />
          <Input className='inputCode' placeholder="请输入工号" />
        </div>
        <div className="herder_right">
          <Button className='sou' type="primary">搜索</Button>
          <Button className='reset'>重置</Button>
        </div>

      </div>
      <div className="minCont">
        <CustomTable
          data={data}
          columns={columns}
          pagination={
            {
              pageSize: pageSize,
              totalPages: totalPages
            }
          }
          onChange={handleTableChange}
        />

        {/* <ConfigProvider locale={zhCN}>
          <Pagination
            total={totalPages}
            pageSize={pageSize}
            current={currentPage}
            onChange={handleChange}
            showSizeChanger
            showQuickJumper
          />
        </ConfigProvider> */}

        {/* <CustomPagination
          totalPages={totalPages}
          pageSize={pageSize}
          currentPage={currentPage}
          onChange={onChange} /> */}
      </div>
      {/* <p>{currentPage},{data.length}</p> */}
    </div>
  )
}
export default Min;